<template>
  <view class="custom-tab">
    <view v-for="(item,index) in list" :key="index" :class="{'active': item === currentItem}" @click="handleClick(item)">{{ item }}</view> 
  </view>
</template>

<script>
export default {
  props: {
    list: {
      type: Array,
      required: true
    },
    currentItem: {
      type: String,
      default: ''
    }
  },
  methods: {
    handleClick(item) {
      this.$emit('tab-click', item);
    }
  }
}
</script>

<style lang="scss" scoped>
.custom-tab { 
  display: flex;
  align-items: center;
  padding: 0.4rem 0.8rem;
  >view{
    margin-right: 0.6rem;
    background: url("../../static/index/tab_bg.png") no-repeat center center/ 100% 100%;
    padding: 0.3rem 0.8rem;
    font-size: 0.9rem;
    color: #6a6a6a;
  }
  .active{
    color: #fff;
    background-image: url("../../static/index/tab_bg-active.png");
  }
  // margin-right: 0.5rem;
  // border: 1px solid #ccc;
  // cursor: pointer;
  // transition: background-color 0.3s;

  // &:hover {
  //   background-color: #f0f0f0;
  // }
}
</style>